<template>
  <div>
    <div id="allmap"></div>
    <div id="r-result">
      城市名:
      <input id="cityName" type="text" style="width:100px; margin-right:10px;" v-model="city" />
      <input type="button" value="查询" @click="theLocation()" />
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      city: '',
      map: ''
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    // 百度地图API功能
    this.map = new BMap.Map('allmap')
    var point = new BMap.Point(116.331398, 39.897445)
    this.map.centerAndZoom(point, 11)
    this.city = this.id
  },
  methods: {
    theLocation () {
      setTimeout(() => {
	      	// var city = document.getElementById('cityName').value
	      	if (this.city !== '') {
	      		this.map.centerAndZoom(this.city, 11) // 用城市名设置地图中心点
	      	}
      }, 0)
    }
  }
}
</script>

<style scoped lang='less'>
#allmap {
  height: 500px;
  width: 100%;
}
#r-result {
  width: 100%;
  font-size: 14px;
}
// /deep/.anchorBL {
//   display: none;
// }
</style>
